<template>
	<module height-full class="container mx-auto overflow-x-hidden overflow-y-auto">
		<sub-topbar class="w-full h-16 p-4 flex leading-8 shadow-md drop">
			<div class="w-60">当前版本：{{M?.version}}</div>
			<Click class="w-16 ml-auto" text="开始" @click="atUpdate" />
		</sub-topbar>
		<ol ref="domListLog" class="w-full shadow-md h-5/6 bg-gray-100 list-decimal px-10 py-2 overflow-y-auto">
			<template v-for="step of P?.step || {}">
				<li v-if="step.stat > -1" class="leading-8 whitespace-nowrap overflow-ellipsis" :style="{ color: colorsStat[step.stat] }" :title="step.text">
					<Fas class="mx-2 w-2" :icon="iconsStat[step.stat]" :spin="step.stat == 1" />
					{{step.title}}：{{step.text || ''}}

					<ul class="pl-16">
						<template v-for="sub of step?.sub || {}">
							<li v-if="sub.stat > -1" class="leading-6 whitespace-nowrap overflow-ellipsis" :style="{ color: colorsStat[sub.stat] }" :title="sub.text">
								<Fas v-if="sub.icon" class="mx-2 w-2" :icon="sub.icon" :spin="sub.stat == 1" />
								{{sub.title}}：{{sub.text || ''}}
							</li>
						</template>
					</ul>
				</li>
			</template>
		</ol>
	</module>
</template>

<script setup>
	import { onMounted, ref } from 'vue';
	import { conn, post } from '../lib/Aegis.js';
	import B from '../lib/Bus.js';
	import Click from '../lib/comp/Click.vue';

	const iconsStat = ref(['minus', 'spinner', 'check', 'times', 'exclamation']);
	const colorsStat = ref(['gray', 'black', 'green', 'darkred', 'darkviolet']);

	const M = ref(null);
	const P = ref({ step: {} });

	const atQuery = async () => M.value = await conn('dir/meta');
	const atUpdate = async () => {
		await post('dir/update', null, {}, true);

		P.value.step = {};
	};

	const domListLog = ref(null);


	B.W.add('addLog', (wock, uuid, data) => {
		P.value.step[uuid] = data;

		setTimeout(() => domListLog.value.scrollTop = domListLog.value.scrollHeight, 10);
	});
	B.W.add('addLogSub', (wock, uuid, sub, data) => {
		const logSub = P.value.step[uuid]?.sub;

		if(sub) {
			logSub[sub] = data;
			setTimeout(() => domListLog.value.scrollTop = domListLog.value.scrollHeight, 10);
		}
	});
	B.W.add('setLog', (wock, uuid, ...datas) => {
		const steps = P.value.step;

		while(datas.length) {
			const [subs, stat, text] = datas.splice(0, 3);

			let step = steps[uuid];

			if(subs != 0) {
				for(const id of String(subs).split('.')) {
					if(!step) { break; }

					step = step.sub?.[id];
				}
			}

			if(step) {
				step.stat = stat;

				if(text !== undefined && text !== '~') {
					step.text = text;
				}
			}
		}
	});
	B.W.add('updateFinish'), () => atQuery();

	onMounted(async () => atQuery());
</script>

<style lang="postcss" scoped>
module {
	@apply relative;
}
</style>